<template>
  <el-card class="mb-4">
    <div class="text-group pd-4 relative">
      <p>{{ text }}</p>
      <div class="arrow-icon" @click="handleClick" title="点击添加到word">
        <svg viewBox="0 0 24 24" width="24" height="24">
          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" fill="currentColor"/>
        </svg>
      </div>
    </div>
    
  </el-card>

</template>

<script>
export default {
  name: 'TextWithArrow',
  props: {
    text: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('click',text);
    }
  }
}
</script>

<style scoped>
.text-container {
  position: relative;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.text-container:hover {
  opacity: 0.8;
}

.text-content {
  display: inline-block;
  margin-right: 30px;
}

.arrow-icon {
  position: absolute;
  right: -8px;
  bottom: -24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.text-container:hover .arrow-icon {
  transform: translateX(4px);
}
</style>

<!-- 使用示例 -->
<!-- 
<template>
  <TextWithArrow 
    text="点击查看详情" 
    @click="handleArrowClick"
  />
</template>

<script>
import TextWithArrow from './TextWithArrow.vue'

export default {
  components: {
    TextWithArrow
  },
  methods: {
    handleArrowClick() {
      console.log('箭头被点击了')
    }
  }
}
</script>
-->
